<!-- 
展示屏幕文字滚动效果
 
使用方法：
 -->
<!-- 
展示屏幕文字滚动效果
usage:
 list:数组数据
 @getCurrentIndex  获取当前swiper的下标
 <textscroll :list="list" @getCurrentIndex="getIndex"/>
 -->
<template>
	<view class="_notice">
		<swiper class="_swiper" @change="slideChange"  :indicator-dots="false" autoplay="true" :interval="interval" circular="true"
		 display-multiple-items="2" :duration="duration">
			<swiper-item v-for="(item,index) in listOne" :key="index">
				<text class="swiper-item">{{item.message}}</text>
			</swiper-item>
		</swiper>
		<swiper class="_swiper" @change="slideChange" :indicator-dots="false" autoplay="true" :interval="interval1" circular="true"
		 display-multiple-items="2" :duration="duration2">
			<swiper-item v-for="(item,index) in listTwo" :key="index">
				<text class="swiper-item">{{item.message}}</text>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props: {
			//显示数据
			listOne: {
				type: Array,
				defual:function(){
					return [];
				}
			},
			listTwo: {
				type: Array,
				defual:function(){
					return [];
				}
			},
		},
		data() {
			return {
				interval:3000,
				duration:12000,
				interval1:2500,
				duration2:10000,
			};
		},
		methods:{
			slideChange(e){
				this.$emit('getCurrentIndex',e.detail.current); 
			}
		}
	};
</script>

<style lang="scss">
	._notice {
		width: 100%;
		height: 150rpx;
		flex-direction: column;
	}
	._swiper {
		height: 50rpx;
		line-height: 50rpx;
		margin-top: 15rpx;
	}
	.swiper-item{
		display: flex;
		padding-left: 20rpx;
		padding-right: 20rpx;
		border-radius: 25rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		font-size: 24rpx;
		text-align: center;
		align-content: center;
		justify-content: center;
		background-color: rgba(255,255,255,0.5);
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		color: #FFFFFF;
		white-space: normal !important;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
</style>